<template>
  <h1>模板引用</h1>
  <div>使用 vue，已经帮我们避免的大部分的对 DOM 的直接操作，但是有时确实需要直接拿到 DOM 手动进行一些操作，也是可行的，只需在需要拿到
    DOM 的标签上定义一个 ref 属性即可
  </div>
  <hr>

  <div ref="hello">被定义了 ref 属ss性的标签</div>
  <button @click="getElement">点击我在控制台查看上述 p 标签的 DOM 输出</button>

  <hr>

  <input type="text" ref="username">
  <button @click="changeInput">查看输入内容</button>
  <hr>

  <p>但一般情况下不建议使用 DOM，因为使用 ref 也是有点消耗性能的，VUE 本身也不是通过手动使用很多 DOM 实现的</p>

</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    getElement() {
      // 添加了 ref 属性的 DOM 将直接暴露在 this.$refs 对象中
      console.log(this.$refs.hello);
      // 修改元素 html
      this.$refs.hello.innerHTML = "修改";
    },
    changeInput() {
      console.log(this.$refs.username.value)
    }
  }
}
</script>
